import React, { Component, createRef } from 'react'
import { Card, Row, Col } from 'antd';
import * as echarts from 'echarts'
import {articalAmount} from '../../request'

export default class index extends Component {
    constructor(props) {
        super(props)
        this.ArticalAmountRef = createRef()
    }

    initArticalEchart = () => {
        articalAmount().then(rep=>{
            const option = {
                title: {
                    text: '阅读视图'
                },
                tooltip: {},
                legend: {
                    data:['阅读量']
                },
                xAxis: {
                    data: rep.amount.map(item=>item.month)
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: rep.amount.map(item=>item.value)
                }]
            }
            this.ArticalChart.setOption(option)

        })
       
        

    }
    componentDidMount() {
        this.ArticalChart = echarts.init(this.ArticalAmountRef.current)

        this.initArticalEchart()
    }

    

    render() {
        const style = {
            minHeight: '140px',
            color: '#F0F8FF',
            backgroundColor: '#A52A2A',
            borderRadius: '5px'
        
        }
        return (
        <>
            <Card title='概览'
                    bordered={false}
                >
                    <Row gutter={16}>
                        <Col className="gutter-row" span={6}>
                            <div style={style}>col-6</div>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <div style={style}>col-6</div>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <div style={style}>col-6</div>
                        </Col>
                        <Col className="gutter-row" span={6}>
                            <div style={style}>col-6</div>
                        </Col>
                    </Row>
                </Card>
                <Card title='概览' >
                    <div ref={this.ArticalAmountRef} style={{height:'400px'}} />
                </Card>
            </>
        )
    }
}
